import { message, Input, Tabs, Popover, Button, ConfigProvider, Spin } from 'antd';
// import styles from '../../styles.less';
import InfiniteScroll from 'react-infinite-scroller';
import './common/index.less';
import MyIcon from '@/components/MyIcon';
import { ContractWarnTabsPane } from './mview/ContractWarnTabsPane';
import { handleDataGridService } from './services';
import '@/pages/ContractController/ContractHomePage/mview/WarnContract/common/styles.less';
import pageStyles from '@/common/pageLayout.less';
import { useEffect, useState, useCallback } from 'react';
import { onMouseOutBtn, getTheme } from '@/utils';

const index = ({ curRes, msgType }) => {
  // msgType 0:超期提醒  1:消息通知
  // curRes 权限

  const styleFixCls = 'contract-warn';
  /** 已读未读 */
  const [readFlagSwitch, setReadFlagSwitch] = useState<string>('0');
  /** 搜索条件 */
  const [contractName, setContractName] = useState<string>('');
  /** 弹窗显示开关 */
  const [open, setOpen] = useState(false);
  /** 保存合同预警数据 */
  const [manageDataList, setManageDataList] = useState<Record<string, any>[]>([]);
  /** 滚动数据 */
  const [scrollObj, setScrollObj] = useState<any>({
    total: 0,
    count: 0,
    loading: false,
    hasMore: true,
    limit: 10,
  });

  /**回调弹窗显隐藏 */
  const hide = () => {
    setOpen(false);
  };
  /**弹窗显隐藏事件 */
  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);
  };

  /** 处理滚动加载 */
  const handleInfiniteOnLoad = () => {
    const { total } = scrollObj;
    if (manageDataList?.length >= total) {
      message.warning('没有更多数据了哦');
      setScrollObj({
        ...scrollObj,
        hasMore: false,
        loading: false,
      });
      return;
    }
    defaultGetWarnData();
  };

  /**
   * 初始化获取数据
   */
  const defaultGetWarnData = (value?: string) => {
    let { count, limit } = scrollObj;
    count++;
    setScrollObj({
      ...scrollObj,
      count: count,
      loading: true,
    });
    let payload = {
      page: 1,
      rows: count * 10 + limit,
      readFlag: readFlagSwitch,
      handleStyle: msgType,
      handleInfo: value || value === '' ? value : contractName,
    };
    handleDataGridRun(payload);
  };

  const supervisingCallback = (res: any) => {
    if (res && res?.msgFlag) {
      setManageDataList(res?.rows);
      setScrollObj({
        ...scrollObj,
        loading: false,
        total: res.total,
      });
    } else {
      message.error(res?.msg);
    }
  };
  const { handleDataGridRun, handleDataGridLoading, manageSearchParams } = handleDataGridService(curRes, supervisingCallback);

  useEffect(() => {
    defaultGetWarnData();
  }, [readFlagSwitch]);

  /**输入框搜索 */
  const onSearch = (value) => {
    setContractName(value);
    defaultGetWarnData(value);
  };
  /**切换未读已读 */
  const handleTabChange = (key) => {
    setScrollObj({
      ...scrollObj,
      total: 0,
      count: 0,
      loading: true,
      hasMore: true,
      limit: 10,
    });
    setReadFlagSwitch(key);
  };

  /** tabs配置 */
  const tabsItem = () => {
    let tabsConfig: any[] = [];
    tabsConfig?.push({
      label: (
        <Button
          style={{ color: readFlagSwitch == '1' ? 'rgba(0, 0, 0, 0.85)' : '#fff' }}
          type={readFlagSwitch == '1' ? 'default' : 'primary'}
          onMouseOut={onMouseOutBtn}
        >
          未读
        </Button>
      ),
      key: '0',
      color: '',
      backGroundColor: '#000',
      children: (
        <div className={pageStyles['InfiniteScrollView']}>
          <InfiniteScroll
            loadMore={handleInfiniteOnLoad}
            initialLoad={false}
            pageStart={1}
            useWindow={false}
            hasMore={!scrollObj?.loading && scrollObj?.hasMore}
          >
            <ContractWarnTabsPane
              styleClassName={styleFixCls}
              contractInfoList={manageDataList}
              reloadManage={() => {
                defaultGetWarnData();
              }}
              handleClick={hide}
              curRes={curRes}
              tabPaneKey={msgType}
            />
          </InfiniteScroll>
        </div>
      ),
    });
    tabsConfig?.push({
      label: (
        <Button
          style={{ color: readFlagSwitch == '1' ? '#fff' : 'rgba(0, 0, 0, 0.85)' }}
          type={readFlagSwitch == '0' ? 'default' : 'primary'}
          onMouseOut={onMouseOutBtn}
        >
          已读
        </Button>
      ),
      key: '1',
      children: (
        <div className={pageStyles['InfiniteScrollView']}>
          <InfiniteScroll
            loadMore={handleInfiniteOnLoad}
            initialLoad={false}
            pageStart={1}
            useWindow={false}
            hasMore={!scrollObj?.loading && scrollObj?.hasMore}
          >
            <ContractWarnTabsPane
              styleClassName={styleFixCls}
              contractInfoList={manageDataList}
              reloadManage={() => {
                defaultGetWarnData();
              }}
              handleClick={hide}
              curRes={curRes}
              tabPaneKey={msgType}
            />
          </InfiniteScroll>
        </div>
      ),
    });
    return tabsConfig;
  };

  /**弹窗内容 */
  const content = () => {
    return (
      <div className="message_content">
        <div style={{ width: '600px' }}>
          <div style={{ padding: '10px 10px 4px 10px' }}>
            <Input.Search enterButton placeholder={msgType == 1 ? '请输入消息内容' : '请输入超期提醒内容'} onSearch={onSearch} />
          </div>
          <Spin spinning={handleDataGridLoading}>
            <Tabs
              tabPosition="left"
              type="card"
              activeKey={readFlagSwitch}
              items={tabsItem()}
              onChange={(activeKey: string) => {
                handleTabChange(activeKey);
              }}
            />
          </Spin>
        </div>
      </div>
    );
  };

  /** 判断 */
  const hrkyTheme = () => {
    if (getTheme() == 'd2844c70-3adf-4a7e-9320-2b7f6fdec5b1') {
      return true;
    } else {
      return false;
    }
  };

  return (
    <Popover content={content} placement="bottomRight" open={open} trigger="hover" onOpenChange={handleOpenChange}>
      <div style={{ margin: '0 10px' }}>
        <MyIcon className={hrkyTheme() ? 'proLayoutMenuHeadBg' : ''} type={msgType == 1 ? 'icon-tongzhi' : 'icon-solution1'} />
      </div>
    </Popover>
  );
};
export default index;
